import {DefineComponent, defineComponent, onMounted, ref,nextTick,} from "vue";
import {NButton, NCard, NIcon, NModal} from "naive-ui"
import {CloseOutlined, FullscreenOutlined} from "@vicons/antd";
import useEditModel from "@/hooks/editModel";
import Markdown from "@/components/markdown/index"

export default defineComponent({
    name: "openfile",
    props: {
        close: {
            type: Function,
            default: null,
        },
    },
    setup({ close,}, {expose}) {
        const inittext=(data:any)=>{
            nextTick().then(()=>{
                markdownref.value?.change(() => {
                    return data.text
                })
            })
        }
        const resettext=()=>{
            markdownref.value?.change(() => {
                return ""
            })
        }
        const {
            showModel,
            handleInit,
            handleClose,
            handleReset,
            formValue,
            formRef,
            title,
            editType,
            resultText,
            loading,
        } = useEditModel(inittext, resettext, "", close)
        expose({handleInit, handleClose, handleReset, formValue})
        const formList = ref([])
        const markdownref = ref<DefineComponent | null>(null)
        /*************************************************初始化区域*************************************************************/
        /*************************************************初始化区域*************************************************************/
        const actionSlot = () => (<div class="flex justify-end items-center my-1">
            <NButton onClick={handleClose}>关闭</NButton>
            <NButton class="ml-10px" type={"primary"}>保存</NButton>
        </div>)
        const defaultSlot = () => (<div class="w-full flex flex-col">
            <NCard contentStyle={{padding: 0, }}>
                <Markdown ref={markdownref}/>
            </NCard>
        </div>)
        const iconSlot = () => (<div class="w-50px h-20px flex justify-between items-center">
            <NIcon size={20}>
                <CloseOutlined/>
            </NIcon>
            <NIcon size={20}>
                <FullscreenOutlined/>
            </NIcon>
        </div>)
        return () => <NModal show={showModel.value} onUpdateShow={(val) => showModel.value = val} preset={"dialog"}
                             title={title.value} showIcon={false} loading={loading.value}
                             v-slots={{action: actionSlot, default: defaultSlot, icon: iconSlot}}/>
    }
})
